<script setup lang="ts">
import { computed } from '@vue/reactivity';
import {
  NModal,
  NInput,
  NButton
} from 'naive-ui';
import { ref } from 'vue';

const props = defineProps<{
  value: boolean
}>()
const emit = defineEmits<{
  (event: 'update:value', v: boolean): void,
  (event: 'ok', name: string): void
}>()

const show = computed(() => props.value)
const name = ref('')

function onClose() {
  emit('update:value', false)
}

function onOk() {
  if (name.value.trim().length < 2) {
    return
  }
  emit('ok', name.value)
}

</script>
  
<template>
  <div class="add-game">
    <n-modal :show="show" class="add-game-card" preset="card" title="添加游戏" :mask-closable="false" size="small"
      :close-on-esc="false" :closable="false" :bordered="false" :segmented="{
        content: 'soft'
      }">
      <n-input placeholder="请输入游戏名称" v-model:value="name" />
      <template #footer>
        <n-button strong secondary type="tertiary" @click="onClose">
          取消
        </n-button>
        <n-button strong secondary type="primary" @click="onOk">
          确定
        </n-button>
      </template>
    </n-modal>
  </div>
</template>
  
<style lang="less">
.add-game-card {
  -webkit-app-region: none !important;
  width: 320px;
  .n-card__footer {
    display: flex;
    justify-content: flex-end;
    button {
      margin-left: 8px;
    }
  }
}
</style>
  